<template>
  <div class="carousel-section">
    <!-- 标题栏和状态栏占位符 -->
    <div class="titleNview-placing"></div>
    <!-- 背景色区域 -->
    <div class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></div>
    <!-- 轮播图 -->
    <div class="carousel">
      <van-swipe
        :autoplay="autoplay"
        indicator-color="yellowgreen"
        :initial-swipe="initialSwipe"
        :width="width"
        :height="height"
        :loop="loop"
        :show-indicators="showIndicators"
        @change="swiperChange"
      >
        <van-swipe-item
          class="carousel-item"
          v-for="(item, i) in banner ? banner : defaultBanner"
          :key="keys+i"
          @click="imgPreviewClicked(i)"
        >
          <van-image class="carousel-item-image" :src="item.src" height="100%" fit="contain">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, ImagePreview, Image, Loading } from 'vant'
Vue.use(Swipe).use(SwipeItem).use(ImagePreview).use(Image).use(Loading)

export default {
  data() {
    return {
      titleNViewBackground: '',
      initialSwipe: 0,
      defaultBanner: [
        {
          src: require("@/assets/banner/banner3.jpg"),
          background: "rgb(203, 87, 60)",
        },
        {
          src: require("@/assets/banner/banner1.jpg"),
          background: "rgb(229, 70, 64)",
        },
        {
          src: require("@/assets/banner/banner2.jpg"),
          background: "rgb(205, 215, 218)",
        },
        {
          src: require("@/assets/banner/banner4.jpg"),
          background: "rgb(183, 73, 69)",
        }
      ]
    }
  },
  props: {
    banner: {
      type: Array
    },
    autoplay: {
      type: String,
      default: '3000'
    },
    width: {
      type: String,
      default: '100vw'
    },
    height: {
      type: String,
      default: '200px'
    },
    loop: {
      type: Boolean,
      default: true
    },
    showIndicators: {
      type: Boolean,
      default: true
    },
    keys: {
      type: String,
      required: true
    }
  },
  methods: {
    imgPreviewClicked(i) {
      ImagePreview({
        images: this.banner ? this.banner.map(item => item.src) : this.defaultBanner.map(item => item.src),
        closeable: true,
        startPosition: i
      })
    },
    swiperChange(index) {
     
				this.titleNViewBackground = this.banner ? this.banner[index].background : this.defaultBanner[index].background
			},
  },
  mounted() {
    this.titleNViewBackground = this.banner ? this.banner[0].background : this.defaultBanner[0].background
  }
}
</script>

<style lang="scss">
.carousel-section {
  position: relative;
  padding-top: 10px;

  // 标题栏和状态栏占位符
  .titleNview-placing {
    padding-top: 44px;
    box-sizing: content-box;
  }

  // 背景色
  .titleNview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 210px;
    transition: 0.4s;
  }
  // swiper组件
  .carousel {
    width: 90%;
    margin: 0 auto;
    .carousel-item {
      width: 100%;
      height: 180px;
      border-radius: 14px;
      overflow: hidden;
      .carousel-item-img {
			width: 100%;
			height: 180px;
		}
    }
  }
}
</style>
